<template>
	<div class="">
		<div class="topTitle">商品分类</div>
		<el-form :model="query" label-width="80px" inline>
			<el-form-item label="分类名称">
				<el-input v-model="query.name" placeholder="请输入分类名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSearch">查询</el-button>
				<el-button @click="handleRefresh">重置</el-button>
			</el-form-item>
		</el-form>
		<el-button type="primary" @click="addClass({})">新建</el-button>
		<el-table ref="singleTable" :data="tableData" highlight-current-row style="margin-top: 20px;" border>
			<el-table-column type="index" label="序号" align="center">
			</el-table-column>
			<el-table-column label="分类名称" align="center" prop="name">
			</el-table-column>
			<el-table-column label="分类描述" align="center" prop="desc">
			</el-table-column>
			<el-table-column label="创建时间" align="center" prop="createTime">
			</el-table-column>
			<el-table-column label="操作" align="center" width="200">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="addClass(scope.row)">编辑</el-button>
					<el-button type="text" size="small" @click="handleDel(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
				@size-change="handleSizeChange" :current-page="query.pageNo" :total="pageTotal"
				@current-change="handlePageChange">
			</el-pagination>
		</div>

		<!-- 新建弹框 -->
		<el-dialog :title="title" :visible.sync="dialogVisibleAdd" width="30%">
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="分类名称" :required="true">
					<el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
				</el-form-item>
				<el-form-item label="描述">
					<el-input type="textarea" v-model="form.desc" placeholder="可输入描述内容"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleAdd = false">取 消</el-button>
				<el-button type="primary" @click="newBuiltYes">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		components: {

		},
		name: 'commodityClass',
		data() {
			return {
				dialogVisibleAdd: false,
				form: {
					name: '',
					desc: '',
				},
				tableData: [],
				pageTotal: 0,
				query: {
					pageNo: 1,
					pageSize: 30
				},
				title: ''
			}

		},
		created() {
			this.getData()
		},
		methods: {
			async handleDel(id) {
				const res = await this.$postForm('/admin/mall/deleteCategory', {
					id
				})
				this.$message.success('删除成功')
				this.getData()
			},
			handlePageChange(val) {
				this.$set(this.query, 'pageNo', val);
				this.getData();
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			handleSearch() {
				this.query.pageNo = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNo: 1,
					pageSize: 30
				}
				this.getData();
			},
			addClass(row) {
				if (row.id) {
					this.title = '编辑分类'
					this.form = JSON.parse(JSON.stringify(row))
				} else {
					this.title = '新建分类'
					this.form = {}
				}
				this.dialogVisibleAdd = true

			},
			// 表格数据
			async getData() {
				const res = await this.$get('/admin/mall/pageQueryCategory', this.query)
				this.tableData = res.data.list
				this.pageTotal = res.data.totalRow
			},
			// 新建确定按钮
			async newBuiltYes() {
				if (this.$.isEmpty(this.form.name)) {
					this.$message.warning('分类名称不能为空')
					return
				}
				const res = await this.$post('/admin/mall/addCategory', this.form)
				this.getData()
				this.dialogVisibleAdd = false
			}
		}
	}
</script>